<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="text1">内容1</div>
    <div class="text1">内容2</div>
    <script src="js/jquery.js"></script>

    <script>
        //JQ的语法标准 jQuery 和 $

        //原型为document.querySelectorAll()
        console.log(jQuery("#text1"))
        console.log($("#test1"))

        //jq转js
        console.log($("#test1")[0])

        //js转jq
        console.log($(document.querySelectorAll(".text1")))

        //获取属性

        let j = document.querySelector(".text1").getAttribute("data-index")//原型
        console.log(j)
        //jq改
        console.log($(".text1").attr("data-index", "修改的内容"))
        //jq取
        console.log($(".text1").attr("data-index"))
        //添加内嵌样式

        document.querySelector(".text1").style.color = "blue";//原型

        $(".text1").css({
            "color": "red"
        })//jq

    </script>

</body>

</html>